<template>
  <section id="systemIndex">
    <h2 class="pageTitle">学生信息</h2>
    <div style="padding:0px 20px;">
      <el-row>
        <el-col :span="2">
          <el-select size="small" v-model="selectCollege" placeholder="请选择学院" @change="majorSelect">
            <el-option
              v-for="item in collegeOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectMajor" placeholder="请选择专业" @change="majorChange">
            <el-option
              v-for="item in majorOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            size="small"
            v-model="selectGrade"
            placeholder="请选择年级"
            @change="clazzSelect"
            value-key="value"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectClazz" placeholder="请选择班级">
            <el-option
              v-for="item in clazzOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectNativePlace" placeholder="请选择籍贯">
            <el-option
              v-for="item in nativePlaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectNation" placeholder="请选择民族">
            <el-option
              v-for="item in nationOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectPoliticsStatus" placeholder="请选择政治面貌">
            <el-option
              v-for="item in politicsStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select size="small" v-model="selectSex" placeholder="请选择性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input v-model="keyword" style="width:150px;" size="small" placeholder="输入学号或姓名搜索"></el-input>
          <el-button type="primary" size="small" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="small" @click="findStudentList('search')">查询</el-button>
          <el-button type="primary" size="small" @click="exportStudent">导出</el-button>
        </el-col>
        <el-col :span="24" style="margin-top:20px;">
          <el-table :data="studentTableData">
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column prop="sn" label="学号" width="130"></el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="grade" label="年级" width="120"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column prop="clazz" label="班级" ></el-table-column>
            <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
            <el-table-column prop="nation" label="民族" width="120"></el-table-column>
            <!-- <el-table-column prop="politicsStatus" label="政治面貌" width="120">
              <template slot-scope="scope">{{scope.row.politicsStatus | politicsStatusFilter}}</template>
            </el-table-column> -->
            <el-table-column prop="gender" label="性别" width="50">
              <template slot-scope="scope">{{scope.row.gender | genderFilter}}</template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
              <el-button type="text"
                               @click="saveSearchLimit(scope.row)"
                               style="margin-right: 10px;">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col
          :span="24"
          style="margin:20px auto;text-align:center;"
          v-if="studentTableData.length!==0"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
<script>
import {common} from '@api/index'
import {checkSpecialName, exportFile, routerPrevName} from '@/tools/utils'
export default {
  name: 'systemIndex',
  data () {
    return {

      activeName: 'first',
      // 学院
      selectCollege: {
        label: '',
        value: ''
      },
      collegeOptions: [],
      // 专业
      selectMajor: {
        label: '',
        value: ''
      },
      majorOptions: [],
      // 年级
      selectGrade: {
        label: '',
        value: ''
      },
      gradeOptions: [],
      // 班级
      selectClazz: {
        label: '',
        value: ''
      },
      clazzOptions: [],
      // 籍贯
      selectNativePlace: {
        label: '',
        value: ''
      },
      nativePlaceOptions: [],
      // 民族
      selectNation: {
        label: '',
        value: ''
      },
      nationOptions: [],
      // 政治面貌
      selectPoliticsStatus: {
        label: '',
        value: ''
      },
      politicsStatusOptions: [],
      // 性别
      selectSex: {
        label: '',
        value: ''
      },
      sexOptions: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 0
        }
      ],
      keyword: '',
      // 学生列表信息
      studentTableData: [],
      page: 1,
      size: 10,
      total: 1
    }
  },
  mounted () {
    window.sessionStorage.clear()
    this.collegeSelect()
    this.gradeSelect()
    this.nativePlaceSelect()
    this.nationSelect()
    this.politicsStatusSelect()
    this.findStudentList()
  },
  computed: {
    userType () {
      return parseInt(this.$store.state.user.type)
    },
    toRouter () {
      const routerName = this.userType === 10 ? 2 : this.userType
      return `${routerPrevName(routerName)}_studentDetailInfo`
    }
  },
  methods: {
    saveSearchLimit (rowData) {
      this.$router.push({ name: this.toRouter, query: { sn: rowData.sn } })
    },
    // 查询学生列表
    findStudentList (paramsType = null) {
      if (paramsType === 'search') {
        this.page = 1
        this.size = 10
      }
      if (checkSpecialName(this.keyword)) {
        this.$message('请输入正确的学号姓名进行查询！')
      } else {
        let params = {
          'clazz': this.selectClazz.label,
          'college': this.selectCollege.label,
          'gender': this.selectSex.value,
          'grade': this.selectGrade.label,
          'keyword': this.keyword,
          'major': this.selectMajor.label,
          'nation': this.selectNation.label,
          'nativePlace': this.selectNativePlace.label,
          'pgCt': this.page,
          'pgSz': this.size,
          'politicsStatus': this.selectPoliticsStatus.value
        }
        let loading = this.$loading({
          target: 'tbody'
        })
        common()._getStudentList(params).then(res => {
          this.studentTableData = []
          loading.close()
          if (res.status && res.data.content) {
            this.studentTableData.push(...res.data.content)
            this.total = res.data.totalElements
          }
        })
      }
    },
    // 重置条件
    resetQuery () {
      this.selectClazz = {label: '', value: ''}
      this.selectCollege = {label: '', value: ''}
      this.selectSex = {label: '', value: ''}
      this.selectGrade = {label: '', value: ''}
      this.selectMajor = {label: '', value: ''}
      this.keyword = ''
      this.selectNation = {label: '', value: ''}
      this.selectNativePlace = {label: '', value: ''}
      this.selectPoliticsStatus = {label: '', value: ''}
      this.page = 1
      this.size = 10
      this.findStudentList()
    },
    // 导出
    exportStudent () {
      const data = {
        'clazz': this.selectClazz.label,
        'college': this.selectCollege.label,
        // 'download': 0,
        'gender': this.selectSex.value,
        'grade': this.selectGrade.label,
        'keyword': this.keyword,
        'major': this.selectMajor.label,
        'nation': this.selectNation.label,
        'nativePlace': this.selectNativePlace.label,
        'pgCt': this.page,
        'pgSz': this.size,
        'politicsStatus': this.selectPoliticsStatus.label
        // 'roleName': this.politicsStatusSelect.label
      }
      exportFile(`./api/schoolOrCollegeOrInstructor/export`, 'post', data, '学生信息')
    },
    // --------------------------------选择条件-------------------------
    //  选择学院
    collegeSelect () {
      common()._findAllCollege().then(res => {
        this.collegeOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.collegeOptions.push(params)
          })
        }
      })
    },
    // 选择专业
    majorSelect () {
      this.selectMajor = {label: '', value: ''}
      this.selectGrade = {label: '', value: ''}
      this.selectClazz = {label: '', value: ''}
      common()._getMajordByCollege(this.selectCollege.value).then(res => {
        this.majorOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.majorOptions.push(params)
          })
        }
      })
    },
    majorChange () {
      // if (this.selectMajor.value) {
      //   common()._findGradeByMajor(this.selectMajor.value).then(res => {
      //     this.gradeOptions = []
      //     this.selectGrade = {label: '', value: ''}
      //     this.selectClazz = {label: '', value: ''}
      //     if (res.status && res.data.length) {
      //       res.data.sort(function (a, b) {
      //         return a - b
      //       }).forEach(item => {
      //         let params = {
      //           label: item,
      //           value: item
      //         }
      //         this.gradeOptions.push(params)
      //       })
      //     }
      //   })
      // }
      this.clazzSelect()
    },
    // 选择年级
    gradeSelect () {
      common()._getAllGrades(this.selectCollege.value).then(res => {
        this.gradeOptions = []
        if (res.status) {
          res.data.sort(function (a, b) {
            return a - b
          }).forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.gradeOptions.push(params)
          })
        }
      })
    },
    // 选择班级
    clazzSelect () {
      this.selectClazz = {label: '', value: ''}
      if (this.selectGrade.value !== '' && this.selectMajor.value !== '') {
        common()._getClassesByMajorAndGrade(
          this.selectMajor.value,
          this.selectGrade.label
        ).then(res => {
          this.clazzOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                value: item.id,
                label: item.name
              }
              this.clazzOptions.push(params)
            })
          }
        })
      } else if (this.selectMajor.value !== '') {
        common()._getClazzByMajor(this.selectMajor.value).then(res => {
          this.clazzOptions = []
          if (res.status) {
            res.data.sort(function (a, b) {
              return a - b
            }).forEach(item => {
              let params = {
                value: item.id,
                label: item.name
              }
              this.clazzOptions.push(params)
            })
          }
        })
      }
    },
    // 选择籍贯
    nativePlaceSelect () {
      common()._findAllProvince().then(res => {
        this.nativePlaceOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.nativePlaceOptions.push(params)
          })
        }
      })
    },
    // 选择民族
    nationSelect () {
      common()._findAllNation().then(res => {
        this.nationOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.nationOptions.push(params)
          })
        }
      })
    },
    // 政治面貌
    politicsStatusSelect () {
      common()._getAllPoliticsStatus().then(res => {
        this.politicsStatusOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              value: item.id,
              label: item.name
            }
            this.politicsStatusOptions.push(params)
          })
        }
      })
    },

    // --------------------------------分页---------------------------------------
    handleSizeChange (val) {
      this.size = val
      this.page = 1
      this.findStudentList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.findStudentList()
    }
  }
}
</script>
<style lang="less" scoped>
.pageTitle {
  padding: 15px 20px 15px 20px;
  background-color: #fff !important;
  font-weight: normal;
  font-size: 15px;
}
.el-select {
  margin-right: 5px;
}
.el-row {
  box-sizing: border-box;
  background-color: #fff;
  margin: 10px auto 0px auto;
  padding: 10px 20px 0px 20px;
}
.el-button + .el-button {
  margin-left: 0px;
}
</style>
